<template>
    <div class="content">
        <div class="returnBtn" @click="hendleReturnBtn">
            <up-icon name="arrow-left" bold size="20"></up-icon>
        </div>
        <div class="topBg">
            <div class="imgBox">
                <image :src="otherData.avatar_url"></image>
                <div class="text">
                    <span style="font-weight: bold;font-size: 32rpx;">{{ otherData.user_name }}</span>
                    <br>
                    <span style="font-size: 26rpx;">ID {{ otherData.dpl_id }}</span>
                </div>
            </div>
            <div class="textBox">
                <div class="leftBoxBig">
                    <div class="leftBox">
                        <div class="leftBoxItem">
                            <span class="itemNum">{{ otherData.likes }}</span>
                            <br>
                            <span>{{ $t('inlike') }}</span>
                        </div>
                        <div class="leftBoxItem">
                            <span class="itemNum">{{ otherData.follows }}</span>
                            <br>
                            <span>{{ $t('attention') }}</span>
                        </div>
                        <div class="leftBoxItem">
                            <span class="itemNum">{{ otherData.fans }}</span>
                            <br>
                            <span>{{ $t('fans') }}</span>
                        </div>
                    </div>
                </div>
                <div class="rightBoxBIg">
                    <div class="rightBox" v-if="!otherData.if_follow">
                        <up-button size="small" shape="circle" @click="attention">{{ $t('attention') }}</up-button>
                    </div>
                    <div class="rightBox pinkBtn" v-else>
                        <up-button size="small" shape="circle" @click="attention2">{{ $t('havepaidattention')
                        }}</up-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mainBox">
            <div class="tabsBox">
                <div class="tabsBoxMain">
                    <span class="commentBoxText">{{ $t('released') }}</span>
                </div>
                <div class="gradientBox">
                    <image src="@/static/images/gradient.png"></image>
                </div>
                <!-- <u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list1"
                    itemStyle="padding-left: 1px; padding-right: 1px; height: 68rpx;"></u-tabs> -->
            </div>
            <div class="mainList">
                <up-list @scrolltolower="pullDown()" v-if="listData.length > 0">
                    <div class="listItem" v-for="(item, index) in listData" :key="index" @click="selectItem(item)">
                        <div class="listItemBox">
                            <div class="imgBox">
                                <image class="imgimg" mode="aspectFill" :src="item.funplay_urls[0]" alt="" />
                            </div>
                            <span class="text">{{ item.funplay_title }}</span>
                            <div class="liteFootle">
                                <image class="fontImg" src="@/static/images/xin.png" alt="" />
                                <span>{{ item.likes ? item.likes : '0' }}</span>
                                <span class="liteTitle">{{ formatTimeAgo(item.add_time) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="listFootle">
                        <span v-if="listLogin">{{ $t('loadingMore') }}</span>
                        <span v-else>{{ $t('noMore') }}~</span>
                    </div>
                </up-list>
                <div class="notList" v-else>
                    <image class="noLikeImg" src="@/static/images/logo.png" alt="" />
                    <span>{{ $t('Thereisnomovement2') }}</span>
                </div>
            </div>
        </div>
        <upModal :modalShow="modalShow" :modalText1="$t('Doyouwanttocancelattention')" :showImage="true"
            :isCancel="true" @cancel="modalShow = false" @cloos="cloos"></upModal>
    </div>
</template>

<script setup lang="ts">
import upModal from '../../components/upModal.vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue'
import { attentionAndNot } from '@/api/index/index.js'
import { otherinfoQt, funplayList } from '@/api/meApi/me.js';
import { useI18n } from 'vue-i18n'
import { formatTimeAgo } from "@/utils/timeUtils.js"
const { t } = useI18n()
const list1 = reactive([
    { name: t('released') },
])
let listData = ref([])
const otherData = ref({})  // 页面数据
const page = ref(1)  // 当前页码‌
const pageSize = ref(10) // 每页条数‌
const total = ref(0) // 总数据量‌
const listLogin = ref(false)
const modalShow = ref(false)
const userCodeData = ref('')// 带出 用户code
const attention = () => {// 关注按钮
    let para = {
        followUserCode: userCodeData.value,
        isFollow: true,
    }
    attentionAndNot(para).then((res: object) => {
        if (res.code === 200) {
            uni.pageScrollTo({
                selector: ".topBox",
                scrollTop: 0
            })
            // uni.showToast({
            //     title: '关注成功',
            //     icon: 'success',
            //     duration: 2000
            // })
            otherData.value.if_follow = true
            getUserData()
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'error',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.msg}`,
            icon: 'error',
            duration: 2000
        })
    })
}
const attention2 = () => {// 取消关注按钮
    modalShow.value = true
}
// 弹窗按钮
const cloos = () => {
    let para = {
        followUserCode: userCodeData.value,
        isFollow: false,
    }
    attentionAndNot(para).then((res: object) => {
        if (res.code === 200) {
            uni.pageScrollTo({
                selector: ".topBox",
                scrollTop: 0
            })
            // uni.showToast({
            //     title: '取消关注成功',
            //     icon: 'success',
            //     duration: 2000
            // })
            otherData.value.if_follow = false
            getUserData()
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'error',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.msg}`,
            icon: 'error',
            duration: 2000
        })
    }).finally(() => {
        modalShow.value = false
    })
}
// 获取数据
const getFashionplay = () => {
    listLogin.value = true
    let para = {
        usercode: userCodeData.value,
        current: page.value,
    }
    funplayList(para).then((res: object) => {
        if (res.code === 200) {
            if (res.data) {
                listData.value.push(...res.data)
            } else {
                page.value--
            }
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'error',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.msg}`,
            icon: 'error',
            duration: 2000
        })
    }).finally(() => {
        listLogin.value = false
    })
}
// 下拉触底事件
const pullDown = () => {
    page.value++
    getFashionplay()
}
const hendleReturnBtn = () => {
    uni.navigateBack()
}
const selectItem = (row: object) => {
    uni.navigateTo({
        url: `/pages/advertisements/articleDetails?data=${row.funplay_code}`
    })
}
const getUserData = () => {// 获取用户数据
    otherinfoQt(userCodeData.value).then((res: object) => {
        if (res.code === 200) {
            otherData.value = res.data;
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'error',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.msg}`,
            icon: 'error',
            duration: 2000
        })
    })
}
onLoad((options: object) => {
    if (options) {
        userCodeData.value = options.data
        getUserData()
        listData.value = []
        page.value = 1
        getFashionplay()
    }
});
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100vh;

    .returnBtn {
        position: fixed;
        top: 2rem;
        left: 20rpx;
        z-index: 9999;
    }

    .topBg {
        width: 100%;
        height: 30.5%;
        background: linear-gradient(135deg,
                #e1e4e9 0%,
                #ffeee7 15%,
                /* 从 5% 开始 */
                #ffeee7 85%,
                /* 到 95% 结束 */
                #e1e4e9 100%);
        position: relative;

        .imgBox {
            margin-left: 3rem;
            color: #fff;
            display: flex;
            align-items: center;

            image {
                width: 6.8rem;
                height: 6.8rem;
                border-radius: 50%;
                margin-top: 4.5rem;
                margin-right: 30rpx;
            }

            .text {
                margin-top: 4.5rem;
                color: #000;
            }
        }

        .textBox {
            width: 100%;
            height: 90rpx;
            margin-top: 15rpx;
            display: flex;
            align-items: center;

            .leftBoxBig {
                width: 55%;
                display: inline-block;

                .leftBox {
                    display: flex;
                    justify-content: space-evenly;

                    .leftBoxItem {
                        display: inline-block;
                        text-align: center;
                        font-size: 26rpx;
                        color: #7A7978;

                        .itemNum {
                            font-weight: bold;
                            font-size: 34rpx;
                            color: #000;
                        }
                    }
                }
            }

            .rightBoxBIg {
                width: 45%;
                display: inline-block;
                text-align: right;

                .rightBox {
                    display: inline-block;
                    margin-right: 40rpx;
                }
            }

        }


        .pinkBtn {
            .u-button {
                color: #fff;
                font-weight: 600;
                background-color: #de868f;
                border: 1px solid #bbbbbb;
            }
        }
    }

    .mainBox {
        width: 100%;
        height: 69.5%;

        .tabsBox {
            width: 100%;
            height: 70rpx;
            background: linear-gradient(90deg, #FFEEE7, #E2E4E9);

            .gradientBox {
                width: 100%;
                height: 2rem;
                z-index: 999;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .tabsBoxMain {
                width: 100%;
                background-color: #EAB3B8;
                border-radius: 15px 15px 0 0;

                .commentBoxText {
                    color: #555C64;
                    font-weight: bold;
                    font-size: 26rpx;
                    line-height: 70rpx;
                    margin-left: 60rpx;
                }
            }

            // ::v-deep .u-tabs {
            //     width: 100%;
            //     height: 100%;
            //     background: linear-gradient(90deg, #FFEEE7, #e1e4e9);
            // }

            // ::v-deep .u-tabs__wrapper {
            //     background-color: #EAB3B8;
            //     border-radius: 15px 15px 0 0;
            // }
        }

        .mainList {
            width: 98%;
            height: calc(100% - 70rpx);
            overflow-y: auto;
            margin: 0 auto;

            ::v-deep .u-list {
                width: 100%;
                height: 100% !important;
            }

            .listItem {
                width: 47%;
                height: 450rpx;
                display: inline-block;
                margin: 10rpx 1.5%;
                background-color: #fff;
                border-radius: 10px;
                // display: flex;
                // justify-content: center;
                // align-items: center;

                .listItemBox {
                    width: 100%;
                    height: 100%;
                    display: inline-block;

                    .imgBox {
                        width: 320rpx;
                        height: 280rpx;
                        position: relative;
                        overflow: hidden;
                        margin: 0 auto;
                        margin-top: 10rpx;
                        border-radius: 25rpx;

                        .imgimg {
                            width: 100%;
                            height: 100%;
                            // position: absolute;
                            // top: 50%;
                            // left: 50%;
                            // transform: translate(-50%, -50%);
                            // margin: 20rpx 0 0 20rpx;
                        }
                    }


                    .text {
                        width: 96%;
                        min-height: 2rem;
                        margin-left: 4%;
                        margin-top: .65rem;
                        font-size: 28rpx;
                        overflow: hidden;
                        word-break: break-all;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                    }

                    .liteFootle {
                        width: 92%;
                        margin-left: 4%;
                        margin-top: 10rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 0.75rem;

                        .fontImg {
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }

                        .liteTitle {
                            width: 55%;
                            text-align: right;
                            color: #707070;
                            font-size: 24rpx;
                            overflow: hidden;
                            margin-left: auto;
                            word-break: break-all;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            line-clamp: 1;
                        }
                    }
                }
            }

            .notList {
                width: 80%;
                margin: 0 auto;
                padding-top: 6rem;
                text-align: center;
                display: flex;
                flex-direction: column;

                .noLikeImg {
                    width: 200rpx;
                    height: 200rpx;
                    margin: 0 auto;
                }

                span {
                    font-size: 28rpx;
                    font-weight: 700;
                    display: inline-block;
                }
            }
        }

        .listFootle {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            color: #6b6b6b;
        }
    }
}
</style>